<template>
  <div v-if="model" class="wrapper">
    <div v-loading="pageLoading" element-loading-background="#fff" class="content">
      <div class="pdf-wrapper" @scroll="handleScroll">
        <PreviewPdf :pdf-url="pdfUrl" @init="initData" />
        <el-icon class="icon" @click="model = false"><Close /></el-icon>
      </div>
      <div v-if="!pageLoading" class="operation-wrapper">
        <el-button type="info" round>{{ pdfData?.pageNum }}/{{ pdfData?.numPages }}页</el-button>
        <el-button round type="primary" :loading="loading" @click="downLoadFn">
          <el-icon class="icon"><Download /></el-icon>导出
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
// import pdfUrl from '@/assets/files/1.pdf'
import PreviewPdf from '@/components/PdfPreivew/index.vue'

export default {
  components: { PreviewPdf },
  setup() {
    const model = ref(false)
    const pdfUrl = ref('')
    const fileName = ref('')
    const loading = ref(false)
    const pageLoading = ref(true)
    let pdfData = reactive({
      pageNum: 1,
      numPages: 0,
      height: 0
    })
    // 打开dialog
    const show = res => {
      pageLoading.value = true
      pdfUrl.value = res.url
      fileName.value = res.name
      model.value = true
    }
    // 初始化
    const initData = val => {
      pdfData.numPages = val.numPages
      pdfData.height = val.height
      pageLoading.value = false
    }
    // 下载
    const downLoadFn = () => {
      console.log('下载', pdfUrl.value)
      loading.value = true
      const a = document.createElement('a')
      a.href = pdfUrl.value
      a.style.display = 'none'
      a.download = `${fileName.value}.pdf` // 下载文件的文件名
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      loading.value = false
    }
    // 滚动修改当前页码
    const handleScroll = event => {
      let topDis = event.target.scrollTop
      let num = Math.ceil(topDis / pdfData.height) + 1
      if (pdfData.pageNum !== num) {
        pdfData.pageNum = num
      }
    }
    return {
      model,
      loading,
      pageLoading,
      pdfUrl,
      pdfData,
      show,
      initData,
      downLoadFn,
      handleScroll
    }
  }
}

</script>
<style scoped lang="scss">
.wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: var(--el-overlay-color-lighter);
  overflow: hidden;
}
.content {
  position: absolute;
  top: 54px;
  left: 50%;
  bottom: 54px;
  width: 650px;
  background-color: #fff;
  transform: translateX(-50%);
}
.pdf-wrapper {
  height: calc(100% - 50px);
  overflow-y: scroll;
  overflow-x: hidden;
  .icon {
    position: absolute;
    top: 0;
    right: -56px;
    width: 24px;
    height: 24px;
    background: rgb(0 0 0 / 40%);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
  }
}
.operation-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}

</style>
